<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order</title>
    <script src="../js/vue.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>

<style>

    /* - 侧边栏 */
    .sidebar {
        top: 0;
        left: 0;
        bottom: 0;
        color: #fff;
        width: 250px;
        position: fixed;
        overflow: hidden;
        overflow-y: auto;
        background: #4b4b4b;
    }

    /* -- 头像 */
    .sidebar .avatar {
        width: 160px;
        height: 160px;
        margin: 2em auto;
        background: #fff;
        border-radius: 100%;
        border: #fff 5px solid;
        transition: transform 0.5s;
    }

    .sidebar .avatar:hover {
        transform: rotate(1turn);
    }

    .sidebar .avatar img {
        border-radius: 100%;
    }

    /* -- 侧边栏导航 */
    .sidebar .nav {
        margin: 0;
        display: flex;
        list-style: none;
        flex-direction: column;
    }

    .sidebar .nav a {
        color: #fff;
        padding: 1em;
        display: block;
        text-align: center;
        transition: background .3s, box-shadow .3s;
    }

    .sidebar .nav a:hover {
        background: rgba(0, 0, 0, .2);
    }

    .order-container {
        display: flex;
        justify-content: start;
    }
	.order-container > div {
	  width: 100px;
	  height: 70px;
	  /* background: linear-gradient(-45deg, #788cff, #b4c8ff); */
	}

    .order-title {
        line-height: 80px;
        font-size: 18px;
        cursor: pointer;
    }

    .order-title:hover {
        text-decoration: underline #8d8d8d;
    }
</style>


<body>


<div id="order" style="margin: 0 50px 0 45px;">

    <div style="float: left;">
        <aside class="sidebar">
            <div class="avatar">
                <!--			<img :src="headshot" style="width: 50px; height: 50px;">-->
                <img :src="headshot" title="Chien_W"/>
            </div>
            <nav class="nav">
                <a href="user.html">个人信息</a>
                <a href="recharge.html">充值</a>
                <a href="order.html">订单</a>
            </nav>
        </aside>
    </div>


    <div style="float: right;margin-right: 20px;">
        <!--		<div style="line-height: 80px;font-size: large;">全部订单</div>-->
        <div class="order-container">
            <div class="order-title" id="order1" @click="getAllInfo()">全部订单</div>
            <div class="order-title" id="order2" @click="orderD(0)">待发货</div>
            <div class="order-title" id="order3" @click="orderY(1)">已发货</div>
			
        </div>
		<el-button type="primary"  style="position: absolute;float: right;margin-top: -45px;margin-left: 687px;" @click="excel()">导出Excel</el-button> 
        
		<hr>
        <el-table
                :data="order"
                style="width: 100%">
			<el-table-column
			        prop="o_id"
			        label="商品编号"
			        width="150">
			</el-table-column>	
            <el-table-column
                    prop="image"
                    label="图片"
                    width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.p_image" style="width: 50px; height: 50px;">
                </template>
            </el-table-column>
            <el-table-column
                    prop="p_name"
                    label="商品名称"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="memory_size"
                    label="参数"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="color"
                    label="颜色">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="单价">
            </el-table-column>
            <el-table-column
                    prop="p_number"
                    label="数量">
            </el-table-column>
            <el-table-column
                    prop="total_price"
                    label="实付">
            </el-table-column>
        </el-table>
    </div>


</div>


<script src="../layui/layui.js"></script>
<script src="../js/axios.js"></script>


<script>
    let app = new Vue({
        el: '#order',
        data: {
            headshot: '',//"../image/tx.jpg",
            uId: 0,
            order: [{
                image: '../image/pms_1691494291.57494192.png',
                name: 'Redmi 12 5G',
                param: '冰瓷白',
                size: '6GB+128GB',
                price: 649.0,
                number: 7,
                total: 5200,
            }]
        },
        methods: {


            //待发货
            orderD(value){
                const _this = this;
                axios.get('../order?op=finds', {params: {uId: _this.uId,oState: 0}})
                    .then((response) => {
                        if (response.data.code == 200) {
                            _this.order = response.data.data;
                        }
                    })


            },

            //打印
            excel(){
                const _this = this;
                axios.get('../excelWrite?op=getExcel', {
                    params: {
                        uId: _this.uId
                    },
                    responseType: "blob"
                })
                    .then((res) =>{
                        // console.info(res);
                        let blob = new Blob([res.data], { type: "application/xlsx" });
                        let url = window.URL.createObjectURL(blob);
                        const link = document.createElement("a"); //创建a标签
                        link.href = url;
                        link.download = "订单_" + new Date().getTime() + ".xlsx"; //重命名文件
                        link.click();
                        URL.revokeObjectURL(url);
                    })
            },

            //已发货
            orderY(value){
                const _this = this;
                axios.get('../order?op=finds', {params: {uId: _this.uId,oState: 1}})
                    .then((response) => {
                        if (response.data.code == 200) {
                            _this.order = response.data.data;
                        }
                    })
            },

            //统一请求_this.uId
            getAllInfo() {
                const _this = this;
                axios.get('../order?op=finds', {params: {uId: _this.uId}})
                    .then((response) => {
                        if (response.data.code == 200) {
                            _this.order = response.data.data;
                        }
                        console.log(_this.order)
                    }).catch((error) => {

                })
            }
        },
        mounted() {
            const _this = this;
            _this.headshot = localStorage.getItem("headshotUrl")
            _this.uId = localStorage.getItem("uId");
            _this.getAllInfo();

        }
    });

</script>
</body>
</html>